<template>
        <el-page-header icon="el-icon-arrow-left" @back="$router.replace('/roomplan')" :content="$route.query.day + '-各房型预定计划'">
        </el-page-header>

    <el-divider></el-divider>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="futureDate" v-if="false"></el-table-column>
        <el-table-column prop="roomTypeId" v-if="false"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="roomTypeName" label="房型名称" min-width="50"></el-table-column>
        <el-table-column prop="repertory" label="房型库存剩余" min-width="50"></el-table-column>
        <el-table-column label="折扣" min-width="30">
            <template #default="scope">
                <el-input-number v-model="scope.row.discount" :min="0.1" :max="1" :precision="2" :step="0.05"  size="medium" :disabled="btnDisabled"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="价格(元)" min-width="30">
            <template #default="scope">
                <el-input-number v-model="scope.row.price" :min="0" :precision="2" :step="10"  size="medium" :disabled="btnDisabled"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="30">
            <template #default="scope">
                <el-popconfirm title="修改价格和折扣将会影响利润,确定吗?" @confirm="saveAndRefresh(scope.row)">
                    <template #reference>
                        <el-button type="primary" :disabled="btnDisabled">保存并刷新</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import {ElMessage} from "element-plus";
    export default {
        name: "default.vue",
        data() {
            return {
                tableData: []
            }
        },
        computed: {
            btnDisabled() {
                return this.$route.query.priceResizable != "true";
            }
        },
        methods: {
            saveAndRefresh(row) {
                this.axios.put('roomplan/', {
                    futureDate: row.futureDate,
                    roomTypeId: row.roomTypeId,
                    discount: row.discount,
                    price: row.price
                }).then(resp => {
                    if (!resp.data.flag) {
                        ElMessage.error(resp.data.msg);
                        return;
                    }
                    ElMessage.success(resp.data.msg);
                    this.axios.get('roomplan/futureDate/' + this.$route.query.day)
                        .then(resp => {
                            if (!resp.data.flag) {
                                ElMessage.error(resp.data.msg)
                                return;
                            }
                            this.tableData = resp.data.data.list;
                        });
                });
            }
        },
        created() {
            this.axios.get('roomplan/futureDate/' + this.$route.query.day)
                .then(resp => {
                    if (!resp.data.flag) {
                        ElMessage.error(resp.data.msg)
                        return;
                    }
                    this.tableData = resp.data.data.list;
                });
        }
    }
</script>

<style scoped>

</style>